<template>
  <view class="swiper-box">
    <!-- {{ }} -->
    <uni-swiper-dot :info="imgInfo" :current="currentCart" field="content" mode="default" :dots-styles="dotsStyles">
      <swiper @change="swiperChange" :current="currentCart" :class="['swiper']" :interval="2000" :duration="500">
        <!-- :style="{ height: `${maxHeight}rpx` }" -->
        <swiper-item v-for="item in imgInfo" :key="item.id">
          <view :class="[maxHeight < 800 ? 'swiper-t-b' : '', 'swiper-item']">
            <view :class="[maxHeight < 800 ? 'less-800_text' : '', 'swiper-item__text']">
              <view :class="[maxHeight < 800 ? 'less-800_title' : '', 'swiper-item_title']">{{
                item.title }}</view>
              <view class="swiper-item_name">{{ item.content }}</view>
            </view>
            <image lazy-load class="img" :style="{ height: `${maxHeight}rpx` }" mode="aspectFill"
              :src="`${baseUrl}${item.img}`" @load="imageLoad">
            </image>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- ------------------------ 参数-开始 ------------------------ -->
    <view class="power-system" v-if="config">
      <view class="item" v-for='item in paramList' :key='item.id'>
        <view class="val ">{{ item.prop_valCtt }}</view>
        <view class="name ">{{ item.prop_name }}</view>
      </view>
    </view>
  </view>
</template>
<script>
let brand = 'ZEEKR'
export default {
  name: "DetailSwiper",
  data() {
    return {
      currentCart: 0,
      // 基础路径
      baseUrl: `${this.$baseUrl}/images/${brand}/car/`,
      // 所有图片的高度
      imgheights: [],
      pH: 1204//屏幕高度
    };
  },
  props: {
    imgInfo: {
      type: Array,
      default() {
        return []
      }
    },
    powerSystem: {
      type: Array,
      default() {
        return []
      }
    },
    config: Number
  },
  mounted() {
    // ------------------------ 获取屏幕高度-开始 ------------------------
    uni.getSystemInfo({
      success: (res) => {
        this.pH = res.windowHeight * 2
        console.log('pH 88:>> ', this.pH);
      }
    });
  },
  methods: {
    swiperChange(e) {
      this.currentCart = e.target.current
      // console.log('e :>> ', e);
    },
    imageLoad(e) {//获取图片真实宽度  
      var imgwidth = e.detail.width
      var imgheight = e.detail.height
      //宽高比  
      var ratio = imgwidth / imgheight;
      //计算的高度值  
      var viewHeight = 750 / ratio;
      var imgheight = viewHeight;
      this.imgheights.push(imgheight + 90)
      // console.log('this.imgheights :>> ', this.imgheights);
    },
  },
  computed: {
    // ------------------------ 图片中的最大高度-开始 ------------------------
    maxHeight() {
      let heights = this.imgheights
      let max = 0
      // console.log('heights :>> ', heights);
      for (let i = 0; i < heights.length; i++) {
        max = heights[i] > max ? heights[i] : max
      }
      return max > this.pH ? this.pH : max
      // return Math.max(...heights)
    },
    dotsStyles() {
      return {
        width: 10,
        bottom: this.maxHeight < 800 ? 60 : 20,
        backgroundColor: '#666',
        border: '#666',
        selectedBackgroundColor: '#fff',
        selectedBorder: '#fff'
      }
    },
    paramList() {
      return this.powerSystem.filter(item => item.propt_parent_id == this.config)
    }
  }
};
</script>

<style lang="scss" scoped>
// ------------------------ 轮播图-开始 ------------------------
.swiper-box {
  position: relative;

  .swiper {
    height: 100vh;
    box-sizing: content-box;
    background-color: #fafafa;

    .swiper-item {
      position: relative;
      display: block;
      height: 100%;
      background-color: #000;

      &__text {
        width: 90%;
        position: absolute;
        left: 5%;
        bottom: 140rpx;
        color: #fff;
      }

      &_title {
        font-size: 48rpx;
        font-weight: 600;
        line-height: 50rpx;
        white-space: pre-wrap;
        margin-bottom: 20rpx;
      }

      &_name {
        font-size: 28rpx;
        color: #fafafa;
      }

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // ------------------------ 动力传动系统-开始 ------------------------
  .power-system {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 200rpx;
    flex-wrap: wrap;
    left: 10%;
    z-index: 120;
    // color: #222;
    color: #fafafa;
    text-align: left;

    .item {
      width: 50%;
      margin-bottom: 40rpx;
    }

    .val {
      line-height: 70rpx;
      font-size: 42rpx;
      font-weight: 600;
      // font-family: 'LynkcoType-Medium';
    }

    .name {
      font-size: 26rpx;
      font-weight: 400;
    }
  }
}

.swiper-t-b {
  padding: 70rpx 40rpx 70rpx 40rpx;
  // background-color: #000;
}

.less-800_text {
  width: 80% !important;
  position: absolute !important;
  left: 10% !important;
  bottom: 280rpx !important;
}

.less-800_title {
  font-size: 40rpx !important;
}
</style>
